<template>
  <div class="pd30 produceFactory">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>定期维保工单管理</div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <!-- <div class="flex flexac">
            <el-input v-model="queryParam.id" class="co-input" placeholder="请输入电梯ID..." />
          </div> -->
          <div class="flex flexac">
            <el-input v-model="param.name" class="co-input" placeholder="请输入工单编号..." @input="getOrderList" />
          </div>
          <div class="groupbtn flex m-l-40 ">
            <el-button class="flex flexac m-r-20 fs14" size="small" type="warning" @click="getOrderList"><i class="co-i" /><span class="search1">查 询</span></el-button>
            <el-button class="co-empty flexcenter m-l-25" type="info" @click="handleEmptySearch"><i class="iconfont icon-qingkong" />清 空</el-button>
          </div>
        </div>
        <div class="con-row flex flexac flexjcsb pl">
          <el-button class="defaultbtn" type="primary" @click="handleRefresh"><i class="el-icon-refresh" :class="refresh?'goRefresh':''" />刷 新</el-button>
          <div class="m-r-25 flex">
            <el-button class="defaultbtn" type="primary" @click="handleAdd"><i class="el-icon-circle-plus-outline" />添加</el-button>
            <el-button class="defaultbtn" type="primary" @click="handleExportExcel"><i class="iconfont icon-wenjiandaochu" />导出</el-button>
            <div class="pre m-l-10">
              <el-button class="defaultbtn pre" type="primary" @click="handleSenior('field')"><i class="iconfont icon-shezhi" />字段
              </el-button>
              <div class="selectUl" :class="seniorSet.field?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" :key="i" class="li">
                  <el-checkbox v-model="item.isShow">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <div class="pre m-l-10">
              <el-button class="defaultbtn" type="primary" @click="handleSenior('sortable')"><i class="iconfont icon-shezhi" />排序</el-button>
              <div class="selectUl" :class="seniorSet.sortable?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" v-if="item.isShow" :key="i" class="li">
                  <el-checkbox v-model="item.sortable">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <!-- <el-button class="defaultbtn" @click="handleExportExcel" type="primary"><i class="iconfont icon-shezhi"></i>固定</el-button> -->
          </div>
        </div>

        <el-table
          id="workList"
          ref="workList"
          class="con-table"
          type="expand"
          :data="workList"
          style="width: 100%"
          highlight-current-row
        >
          <template v-for="item in tablehead">
            <el-table-column v-if="item.isShow" :key="item.id" :width="item.width" align="center" :sortable="item.sortable" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" />
          </template>
          <el-table-column align="center" prop="name" label="基本操作">
            <template slot-scope="scope">
              <el-button class="defaultbtn" type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">
                <i class="el-icon-edit" />
                编辑</el-button>
              <!-- <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn(scope.$index, scope.row)"><i class="el-icon-delete-solid" />删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paginationWrap flex " :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <WorkDialog v-model="workVisible" :data="workData" :is-edit="isEdit" @handleRefresh="handleRefresh" @handleCloseDialog="handleCloseDialog" />
  </div>
</template>

<script>

import WorkDialog from './dialog/index'
import { miOrderQueryList, miOrderDelete } from '@/api/maintenance/order'
import { preImageView } from '@/api/maintenance/Filecontrller'
import { elevatorDetail } from '@/api/elevator/elevator'
import { showNotice, formatDateTime } from '@/utils/toolclass'
import storage from '@/utils/storage'

export default {
  name: 'Contract',
  components: { WorkDialog },
  props: {},
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 0
      },
      workList: [],
      param: {
        id: '',
        name: '',
        type: 1
      },
      params: {
        bindState: '',
        id: '',
        registerCode: '',
        registerUnit: '',
        rescueCode: ''
      },
      workVisible: false,
      workData: {},
      elevatorList: [],
      isEdit: false,
      refresh: false,
      seniorSet: {
        'field': false,
        'sortable': false
      },
      tablehead: [
        {
          index: 0,
          prop: 'index',
          label: '序号',
          width: '80',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'orderNumber',
          label: '工单编号',
          width: '150',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'userUnitName',
          label: '使用单位',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'registerCode',
          label: '注册代码',
          // width: '160',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 4,
          prop: 'rescueCode',
          label: '位置码',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 5,
          prop: 'assignTime',
          label: '派单时间',
          width: '140',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 6,
          prop: 'finishTime',
          label: '完成时间',
          width: '140',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 7,
          prop: 'workUserName',
          label: '维保工人',
          width: '120',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 8,
          prop: 'state',
          label: '工单状态',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 9,
          prop: 'type',
          label: '工单类型',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ],
      videoPath: '',
      downImage: '',
      inImage: '',
      otherImage: '',
      roomImage: '',
      signImage: '',
      topImage: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOrderList()
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/regular/work' }))
    console.log(JSON.parse(storage.get('userInfo')))
  },
  methods: {
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
      }
      if (type === 'sortable') {
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },

    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['工单编号', '使用单位', '注册代码', '救援代码', '派单时间', '完成时间', '维保工人', '工单状态', '工单类型']
        const filterVal = ['orderNumber', 'userUnitName', 'registerCode', 'rescueCode', 'assignTime', 'finishTime', 'workUserName', 'state', 'type']
        const data = this.formatJson(filterVal, this.workList)
        export_json_to_excel(tHeader, data, '定期维保工单列表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleRefresh() {
      this.refresh = true
      this.getOrderList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    getOrderList() {
      miOrderQueryList(this.param.name, this.paging.currentPage, this.paging.pageSize, this.param.type).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.workList = res.data.map((item, i) => {
            const items = {
              index: i + 1,
              acceptTime: this.$moment(item.acceptTime).format('YYYY-MM-DD'),
              arriveTime: this.$moment(item.arriveTime).format('YYYY-MM-DD'),
              assignTime: this.$moment(item.assignTime).format('YYYY-MM-DD'),
              crtDate: this.$moment(item.crtDate).format('YYYY-MM-DD'),
              crtOpr: item.crtOpr,
              deviceId: item.deviceId,
              dispatcherId: item.dispatcherId,
              downImage: item.downImage,
              elevatorId: item.elevatorId,
              finishTime: this.$moment(item.finishTime).format('YYYY-MM-DD'),
              id: item.id,
              inImage: item.inImage,
              lstEdtDate: this.$moment(item.lstEdtDate).format('YYYY-MM-DD'),
              lstEdtOpr: item.lstEdtOpr,
              maUnitName: item.maUnitName,
              maUnitid: item.maUnitid,
              orderNumber: item.orderNumber,
              orgId: item.orgId,
              otherImage: item.otherImage,
              placeId: item.placeId,
              planId: item.planId,
              planName: item.planName,
              registerCode: item.registerCode,
              remark: item.remark,
              rescueCode: item.rescueCode,
              roomImage: item.roomImage,
              signImage: item.signImage,
              state: item.state === 1 ? '发起' : item.state === 2 ? '受理' : item.state === 3 ? '指派' : item.state === 4 ? '接单' : item.state === 5 ? '处理' : '完成',
              topImage: item.topImage,
              type: item.type === 1 ? '维保工单' : '救援工单',
              userUnitId: item.userUnitId,
              userUnitName: item.userUnitName,
              version: item.version,
              videoPath: item.videoPath,
              videoFile: item.videoFile,
              workUserName: item.workUserName,
              workmanId: item.workmanId
            }
            return items
          })
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        }
      })
    },
    handleEmptySearch() {
      this.param.id = ''
      this.param.name = ''
      this.getOrderList()
    },
    getImages(row) {
      // downImage 地坑
      if (row.downImage !== '') {
        preImageView(row.downImage).then(res => {
        // console.log(res)
          return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
          // console.log(data)
          this.downImage = data
        })
      }
      // inImage 轿厢
      if (row.inImage !== '') {
        preImageView(row.inImage).then(res => {
        // console.log(res)
          return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
          this.inImage = data
        })
      }
      // otherImage 其他
      if (row.otherImage !== '') {
        preImageView(row.otherImage).then(res => {
        // console.log(res)
          return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
          this.otherImage = data
        })
      }
      // roomImage 机房
      if (row.roomImage !== '') {
        preImageView(row.roomImage).then(res => {
        // console.log(res)
          return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
          this.roomImage = data
        })
      }
      // signImage 签到
      if (row.signImage !== '') {
        preImageView(row.signImage).then(res => {
        // console.log(res)
          return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
          this.signImage = data
        })
      }
      // topImage 轿顶
      if (row.topImage !== '') {
        preImageView(row.topImage).then(res => {
        // console.log(res)
          return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
          this.topImage = data
        })
      }
      // videoPath 现场视频
      // if (row.videoPath !== '') {
      //   preImageView(row.videoPath).then(res => {
      //   // console.log(res)
      //     return 'data:video/mp4;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      //   }).then(data => {
      //     // console.log(data)
      //     this.videoPath = data
      //   })
      // }
    },
    handleEdit(index, row) {
      // console.log(row)
      this.workVisible = true
      this.isEdit = true
      this.getImages(row)
      if (row.videoPath !== '') {
        preImageView(row.videoPath).then(res => {
        // console.log(res)
          return 'data:video/mp4;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }).then(data => {
        // console.log(data)
          storage.set('videoPath', data)
          this.videoPath = data
        })
      }
      // console.log(JSON.parse(storage.get('videoPath')))
      setTimeout(() => {
        elevatorDetail(row.elevatorId).then(res => {
          if (res.code === '000000') {
            // console.log(this.videoPath)
            // console.log(this.downImage, this.inImage, this.otherImage, this.signImage, this.topImage, this.roomImage)
            this.workData = {
              acceptTime: row.acceptTime,
              arriveTime: row.arriveTime,
              assignTime: row.assignTime,
              crtDate: row.crtDate,
              crtOpr: row.crtOpr,
              deviceId: row.deviceId,
              dispatcherId: row.dispatcherId,
              downImage: this.downImage,
              dImage: row.downImage,
              elevatorId: row.elevatorId,
              finishTime: row.finishTime,
              id: row.id,
              inImage: this.inImage,
              iImage: row.inImage,
              lstEdtDate: row.lstEdtDate,
              lstEdtOpr: row.lstEdtOpr,
              maUnitName: row.maUnitName,
              maUnitid: row.maUnitid,
              orderNumber: row.orderNumber,
              orgId: row.orgId,
              otherImage: this.otherImage,
              oImage: row.otherImage,
              placeId: row.placeId,
              planId: row.planId,
              planName: row.planName,
              registerCode: row.registerCode,
              remark: row.remark,
              rescueCode: row.rescueCode,
              roomImage: this.roomImage,
              rImage: row.roomImage,
              signImage: this.signImage,
              sImage: row.signImage,
              state: row.state,
              topImage: this.topImage,
              tImage: row.topImage,
              type: row.type,
              userUnitId: row.userUnitId,
              userUnitName: row.userUnitName,
              version: row.version,
              vPath: row.videoPath,
              videoPath: JSON.parse(storage.get('videoPath')),
              workUserName: row.workUserName,
              workmanId: row.workmanId,
              elevatorList: [res.data]
            }
          } else {
            // showNotice('error', '提示', res.msg)
          }
        })
      }, 300)
    },
    handleAdd() {
      this.workVisible = true
      this.isEdit = false
      this.workData = {
        acceptTime: '',
        arriveTime: '',
        assignTime: '',
        crtDate: '',
        crtOpr: '',
        deviceId: '',
        dispatcherId: '',
        downImage: '',
        elevatorId: '',
        finishTime: '',
        id: 0,
        inImage: '',
        lstEdtDate: '',
        lstEdtOpr: '',
        maUnitName: '',
        maUnitid: '',
        orderNumber: '',
        orgId: '',
        otherImage: '',
        placeId: '',
        planId: '',
        registerCode: '',
        remark: '',
        rescueCode: '',
        roomImage: '',
        signImage: '',
        state: '',
        topImage: '',
        type: 1,
        userUnitId: '',
        userUnitName: '',
        version: '',
        videoPath: '',
        workUserName: '',
        workmanId: '',
        elevatorList: []
      }
    },
    handleDeleteBtn(index, row) {
      this.$alert('这个操作会删除和它相关联的所有数据,确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: action => {
          if (action === 'confirm') {
            this.handleDelete(row.id)
          }
        }
      })
    },
    handleDelete(id) {
      miOrderDelete(id).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '删除成功')
          this.getOrderList()
        }
      })
    },
    handleCloseDialog() {
      this.workVisible = !this.workVisible
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getOrderList()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
